<template>
	<view class="dialogue">
		<!-- 头部 -->
		<view class="dialogue-header">
			<!-- 内容 -->
			<view class="dialogue-header-box">
				<view>
					<text class="iconfont dialogue-header-box-title" @tap="goBack">&#xe6b0;</text>
					<text>{{user[0]}}</text>
				</view>
				<view>
					<text class="iconfont" @tap="openTraAcc">&#xe632;</text>
					<text class="iconfont" @tap="openFriMan">&#xeb86;</text>
				</view>
			</view>
		</view>
		<!-- 主体 -->
		<scroll-view class="dialogue-content" :scroll-y="true">
			<image src="../../../../static/image/contacts/zhanwei.jpg" mode="scaleToFill"></image>
		</scroll-view>
		<!-- 底部输入框 -->
		<view class="dialogue-footer">
			<text class="iconfont">&#xe664;</text>
			<view>
				<text class="iconfont">&#xe603;</text>
				<text class="iconfont">&#xe740;</text>
			</view>
			<text class="iconfont">&#xe661;</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: ['玄戈'],
				/* 对话者名称 */
				scrollNum: 0,
				/* 主体滚动条初始值 */
			}
		},
		methods: {
			/* 返回社交页面 */
			goBack: function() {
				uni.navigateBack({
					delta: 1
				})
			},
			/* 打开转账页面 */
			openTraAcc: function() {
				console.log('打开转账页面')
			},
			/* 打开聊天对象管理设置界面 */
			openFriMan: function() {
				console.log('打开聊天对象管理设置界面')
			},
			/* 获取对话者名称 */
			getUserName: function(data){
			
			}
		},
		onReady: function() {
			/* 获取主体内容高度，动态设置滚动条 */
		},
		mounted: function() {
			uni.$once('goDialogue', this.getUserName)
		}
	}
</script>

<style scoped lang="less">
	/* 引入color.less */
	@import url("../../../../static/color.less");

	/* 引入fontSize.less */
	@import url("../../../../static/fontSize.less");

	/* 主体 */
	.dialogue {
		background-color: #F5F5F5;
	}

	/* 头部 */
	.dialogue-header {
		height: 150rpx;
		position: sticky;
		top: 0;
		background-color: @masterColor;


		/* 内容 */
		.dialogue-header-box {
			display: flex;
			width: 100%;
			height: 100rpx;
			position: absolute;
			bottom: 0;
			left: 0;
			color: @colorWrite;
			align-items: center;
			justify-content: space-between;



			view {
				&:first-child {
					width: 564rpx;
					font-size: @fontBigger;
					/* 标题 */
					.dialogue-header-box-title {
						padding-left: 34rpx;
						font-size: @fontBigger;
					}
				}

				&:last-child {
					width: 186rpx;
				}

				display: flex;
				align-items: center;
			}

			/* iconfont */
			.iconfont {
				margin: 0 25rpx 0 13rpx;
				font-weight: bold;
				font-size: 55rpx;
			}
		}
	}

	/* 主体 */
	.dialogue-content {
		height: calc(100vh - 250rpx);
		image{
			width: 750rpx;
			height: 984rpx;
		}
	}

	/* 底部 */
	.dialogue-footer {
		width: 750rpx;
		height: 100rpx;
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: @colorWrite;
		align-items: center;
		color: #7F8289;

		&>.iconfont {
			font-size: 65rpx;
			margin: 0 27rpx;
		}

		view {
			width: 512rpx;
			height: 65rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			border-bottom: 1rpx solid #C1C1C1;

			.iconfont {
				margin: 0 10rpx;
				font-size: 47rpx;

				&:first-child {
					color: #CCCCCC;
				}

				&:last-child {
					font-weight: bold;
					font-size: 50rpx;
				}
			}
		}
	}
</style>
